<template>
  <m-layout>
    <mt-header slot="header" title="添加客户" >
      <mt-button  slot="left" icon="back" @click="handleClose"></mt-button>
    </mt-header>
    <div slot="body" class="custom">
      <mt-field label="姓名" placeholder="请输入真实姓名（必填）" :attr="{ maxlength: 40 }" v-model="from.name"></mt-field>
      <mt-field label="监护人手机" placeholder="监护人手机（必填）" type="tel" v-model="from.parentMobile"></mt-field>
      <mt-field label="性别">
        <select @change='getSex' ref='sex'>
          <option value='' disabled selected style='display:none;'>请选择性别（必选）</option>
          <option v-for='(item, index) in sexList' :key='index'   :value ="item.value">{{item.label}}</option>
        </select>
      </mt-field>
      <mt-field label="家庭住址" placeholder="家庭住址（必填）" :attr="{ maxlength: 200 }" v-model="from.address"></mt-field>
      <mt-field label="咨询校区">
        <select @change='getAdvisorySchoolId' ref='schoolId'>
          <option value='' disabled selected style='display:none;'>请选择校区（必选）</option>
          <option v-for='(item, index) in schoolList' :key='index'   :value ="item.id">{{item.schoolName}}</option>
        </select>
      </mt-field>
      <mt-field label="来源">
        <select @change='getOrigine' ref='origine'>
          <option value='' disabled selected style='display:none;'>请选择来源（必选）</option>
          <option v-for='(item, index) in origineList' :key='index'   :value ="item.value">{{item.label}}</option>
        </select>
      </mt-field>
      <mt-field label="电子邮箱" placeholder="请输入电子邮箱" type="email" v-model="from.email"></mt-field>
      <mt-field label="证件类型"  >
        <select @change='getIdType' ref='idType'>
          <option value='' disabled selected style='display:none;'>请选择证件类型</option>
          <option v-for='(item, index) in idTypeList' :key='index'   :value ="item.value">{{item.label}}</option>
        </select>
      </mt-field>
      <mt-field label="证件号" placeholder="请输入有效证件号" type="tel" v-model="from.idNo"></mt-field>
      <mt-field label="体重（KG）" placeholder="请输入学员体重" type="tel" v-model="from.weight"></mt-field>
      <mt-field label="身高（CM）" placeholder="请输入学员身高" type="tel" v-model="from.height"></mt-field>
      <mt-field label="籍贯">
        <div class="tc">
          <m-address-cascader v-model="origin" placeholder='请选择籍贯' :grade='2' />
        </div>
      </mt-field>
    </div>
    <div slot="bottom" >
      <mt-button type="primary" size="large"  @click='submit'
      :disabled='!(from.name && from.parentMobile && from.sex && from.address && from.advisorySchoolId && from.origine && (from.idType != 1 || from.idNo))'>
        确认
      </mt-button>
    </div>
  </m-layout>
</template>

<script>
import saleApi from 'api/sale.js'
import MAddressCascader from '@/views/components/AddressCascader'
import {MessageBox} from 'mint-ui'

export default {
  components: {
    MAddressCascader
  },
  mounted () {
    // 获取校区
    saleApi.getCampusList({}).then((res) => {
      this.schoolList = res.data
    })
  },
  methods: {
    handleClose () {
      let from = this.from
      if (from.name || from.parentMobile || from.email || from.sex || from.address || from.weight || from.height || from.origine || from.advisorySchoolId || from.idType || from.idNo || from.origin) {
        MessageBox.confirm('离开后信息将不保存', '确认离开？').then(action => {
          this.$router.go(-1)
        }).catch(action => {
        })
      } else {
        this.$router.go(-1)
      }
    },
    submit () {
      // 选择的内容不需要验证正确性
      // idType: '', // 选择-证件类型
      // sex: '', // 选择-性别
      // origine: '', // 选择-来源
      // advisorySchoolId: '', // 选择-校区
      // origin: '' // 选择-籍贯
      // from.name: '', // 限制输入2-40个汉字或字母，超出部分截断，不报错
      // from.parentMobile: '',
      // from.email: '',
      // from.address: '', // 限制输入1-200个字符，超出部分截断，不报错。
      // from.weight: '', // 规则-限制输入0~200的数字，若有小数，保留小数点后两位
      // from.height: '', // 规则-限制输入0~300的整数
      // from.idNo: '' // 只验证身份证（idType = 1）时的格式 15 / 18位数字
      // 限制输入2-40个汉字或字母，超出部分截断，不报错
      if (!(/^[\u4E00-\u9FA5A-Za-z]{2,40}$/.test(this.from.name))) {
        MessageBox.alert('请填写真实姓名', '')
        return
      }
      if (!(/^1\d{10}$/.test(this.from.parentMobile))) {
        MessageBox.alert('请输入有效的手机号', '')
        return
      }
      if (this.from.email && !(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(this.from.email))) {
        MessageBox.alert('请输入正确的输入邮箱', '')
        return
      }
      let weight = parseFloat(this.from.weight).toFixed(2)
      if (this.from.weight && (weight < 0 || weight > 201)) {
        MessageBox.alert('请输入正确的体重', '')
        return
      }

      let height = parseInt(this.from.height)
      if (this.from.height && (height < 0 || height > 300)) {
        MessageBox.alert('请输入正确的身高', '')
        return
      }
      if (Number(this.from.idType) === 1 && !(/(^\d{15}$)|(^\d{18}$)/.test(this.from.idNo))) {
        MessageBox.alert('请输入正确的身份证号', '')
        return
      }
      this.from.origin = this.origin.join(',')
      saleApi.addStudent(this.from).then(() => {
        this.$router.replace('/sale/customer-list')
      }).catch()
    },
    getSex () {
      this.from.sex = this.$refs.sex.value
    },
    getAdvisorySchoolId () {
      this.from.advisorySchoolId = this.$refs.schoolId.value
    },
    getOrigine () {
      this.from.origine = this.$refs.origine.value
    },
    getIdType () {
      this.from.idType = this.$refs.idType.value
    }
  },
  data () {
    return {
      from: {
        name: '',
        parentMobile: '',
        email: '',
        sex: '',
        address: '',
        weight: '',
        height: '',
        origine: '',
        advisorySchoolId: '',
        idType: '',
        idNo: '',
        origin: ''
      },
      origin: [],
      schoolList: [],
      sexList: [
        {
          label: '男',
          value: 1
        },
        {
          label: '女',
          value: 2
        }
      ],
      origineList: [
        {
          label: '地推',
          value: 1
        },
        {
          label: '传单',
          value: 2
        },
        {
          label: '转介绍',
          value: 3
        },
        {
          label: '地摊',
          value: 4
        },
        {
          label: '电销',
          value: 5
        },
        {
          label: '公开课',
          value: 6
        },
        {
          label: '微信',
          value: 7
        }
      ],
      idTypeList: [
        {
          label: '身份证',
          value: 1
        },
        {
          label: '护照',
          value: 2
        },
        {
          label: '其他证件',
          value: 3
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.custom{
  // font-size: $font-size-small;
}
</style>

<style lang="scss" >
.custom{
}
</style>
